<template>
	<view class="container">
		<view class="head-box">
			<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/b2.png" style="width: 100%;position: absolute;z-index: -1;" mode="widthFix"></image>
			<view class="inp-box">
				<view class="location_box">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/wz.png" mode=""></image>
					<text>{{ location }}</text>
				</view>
				<view class="inp-item">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/ss.png" mode=""></image>
					<input type="text" placeholder="点击输入搜索内容" />
				</view>
				<view class="sys-box" @click="sfk()">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/sm.png" mode=""></image>
					<text>扫一扫</text>
				</view>
				<view class="kf_box" @click="zb()">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/kf.png" mode=""></image>
					<text>客服</text>
				</view>
			</view>
		</view>
		<!-- 功能栏 -->
		<view class="menu_box">
			<view class="menu_item" v-for="(item, index) in menu_list" :key="index" @click="bindGoodsList(item.id,item.name)">
				<image :src="Config_ysy.img_url+item.image" mode=""></image>
				<text>{{ item.name }}</text>
			</view>
		</view>
		<!-- 人气榜单 -->
		<view class="moods">
			<image class="rq_img" src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_user/556.png" mode=""></image>
			<view class="rq_top">
				<view class="rq_title">人气榜单</view>
				<view class="rq_left">
					<view class="rq_qg">立即抢购</view>
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/left.png" mode=""></image>
				</view>
			</view>
			<view class="rq_bottom">
				<view class="rq_item" v-for="(item, index) in mooodList" :key="index"  @click="bindGoodsShop(item.id)">
					<image :src="item.image" mode=""></image>
					<view class="price">￥{{ item.sku_price[0].price }}</view>
				</view>
			</view>
		</view>
		<!-- 今日秒杀 -->
		<view class="seckill_box">
			<view class="kill_head">
				<view class="kill_left">
					<view class="left_title">
						今日秒杀
						<text>距秒杀活动结束</text>
					</view>
					<view class="left_time">
						<text>{{hours|add0}}</text>
						：
						<text>{{minutes|add0}}</text>
						：
						<text>{{seconds|add0}}</text>
					</view>
				</view>
				<view class="kill_right">更多产品 ></view>
			</view>
			<view class="kill_list">
				<view class="kill_item" v-for="(item, index) in killList" :key="index" @click="bindGoodsShop(item.id)">
					<view class="left">
						<view class="title">{{ item.title }}</view>
						<view class="sub_title">{{ item.subtitle }}</view>
					</view>
					<view class="right"><image :src="item.image" mode=""></image></view>
				</view>
			</view>
		</view>
		<!-- 火爆推荐 -->
		<view class="recommed">
			<view class="reco_head">火爆推荐</view>
			<view class="reco_list">
				<view class="list_tab">
					<view class="goods" v-if="goodsBool" @click="bindTab">商品</view>
					<view class="goods_select" v-if="goodsBools" @click="bindTab">商品</view>
					<view class="shops" v-if="shopBool" @click="bindTabs">商家</view>
					<view class="shops_select" v-if="shopBools" @click="bindTabs">商家</view>
				</view>
				<view class="list_list">
					<view class="list_item" v-for="(item, index) in recommedList" :key="index" @click="bindGoodsShop(item.id)">
						<view class="item_img"><image :src="item.image" mode=""></image></view>
						<view class="item_title">{{ item.title }}</view>
						<view class="item_price">
							<!-- <text style="font-size: 20upx; color: #333333;">售</text> -->
							<text style="font-size: 20upx;color:#F40332;">￥{{ item.sku_price[0].price }}</text>
							<text style="text-decoration:line-through;font-size: 16upx;color: #808080;">￥{{ item.original_price }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 热门榜单 -->
		<view class="hot_box">
			<view class="hot_head">热门榜单</view>
			<view class="hot_list">
				<view class="hot_item" v-for="(item, index) in hotList" :key="index" @click="bindGoodsShop(item.id)">
					<view class="hot_title">{{ item.title }}</view>
					<view class="hot_img"><image :src="item.image" mode=""></image></view>
					<view class="hot_price">
						<text style="font-size: 20upx;color:#F40332;">￥{{ item.sku_price[0].price }}</text>
						<text style="text-decoration:line-through;font-size: 16upx;color: #808080;margin-left: 20upx;">￥{{ item.original_price }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 首发新品 -->
		<view class="new_goods">
			<view class="goods_head">
				<view class="head_left">首发新品</view>
				<view class="head_right">更多产品 ></view>
			</view>
			<view class="goods_list">
				<view class="goods_item" v-for="(item, index) in goodsList" :key="index" @click="bindGoodsShop(item.id)">
					<view class="goods_img">
						<image :src="item.image" mode=""></image>
						<text class="rq">人气热销</text>
					</view>
					<view class="goods_title">{{ item.title }}</view>
					<view class="goods_sale">已有{{ item.sales }}人购买</view>
					<view class="goods_price">现价：￥{{ item.sku_price[0].price }}</view>
					<view class="goods_old">原价：￥{{ item.original_price }}</view>
				</view>
			</view>
		</view>
		<!-- 优选易好物 -->
		<view class="optim_box">
			<view class="goods_head">
				<view class="head_left">优选易好物</view>
				<view class="head_right">更多产品 ></view>
			</view>
			<view class="optim_list">
				<view class="optim_item" v-for="(item, index) in optimList" :key="index" @click="bindGoodsShop(item.id)">
					<view class="optim_img"><image :src="item.image" mode=""></image></view>
					<view class="optim_title">{{ item.title }}</view>
					<view class="optim_sub">{{ item.subtitle }}</view>
					<view class="price">￥{{ item.sku_price[0].price }}</view>
				</view>
			</view>
		</view>
		<view class="back_hom"  @click="tohome">
			<!-- :style="{'display':(flag===true? 'block':'none')}" -->
			<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/tabbars/top.png" mode="" :style="{'display':(flag===true? 'block':'none')}" ></image>
		</view>
		<!-- 猜你喜欢 -->
		<view class="lungth">
			<view class="lungth_head">
				<view class="line"></view>
				<view class="like">猜你喜欢</view>
				<view class="lines"></view>
			</view>
			<view class="like_list">
				<view class="like_item" v-for="(item, index) in likeList" :key="index" @click="bindGoodsShop(item.id)">
					<image :src="item.image" mode=""></image>
					<view class="like_title">{{ item.title }}</view>
					<view class="like_subtitle">{{ item.subtitle }}</view>
				</view>
			</view>
		</view>
		<view class="bottom-tab">
			<view class="bottom-tab-item-sider" @click="changeTab(index, item.url)" v-for="(item, index) in tabListParent" :key="index">
				<image v-if="index == 0" class="first-img" :src="item.select_icon"></image>
				<image v-if="index != 0" class="first-img" :src="item.icon"></image>
				<text :class="index == 0 ? 'text-position text-on' : 'text-position'">{{ item.name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			location: '定位中',
			menu_list: [],
			mooodList: [],
			killList: [],
			recommedList: [],
			hotList: [],
			goodsList: [],
			optimList: [],
			likeList: [],
			goodsBool: false,
			goodsBools: true,
			shopBool: true,
			shopBools:false,
			hours: 0,
			minutes: 0,
			seconds: 0,
			glBool:true,
			slBool:false,
			shop_id:907,
			token:'',
			flag:false,
			tabListParent: [],
		};
	},
	onShow() {
		this.getKillData()
	},
	onLoad(option) {
		this.token=option.token
		this.shop_id=option.shop_id
		this.address_x()
		this.getNavData()
		this.getData();
		this.getShiftData();
		this.getGoodsList();
		this.getOpiData();
		this.getLikeData();
		this.getRqData();
		this.getTabData()
		
	},
	onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
			if(e.scrollTop>400){ //当距离大于600时显示回到顶部按钮
				this.flag=true
			}else{ //当距离小于600时隐藏回到顶部按钮
				this.flag=false
			}
		},
	filters: {
		add0: function(num) {
			return num < 10 ? '0' + num : num;
		}
	},
	methods: {
		address_x(){
			var address = uni.getStorageSync('address')
			let params = {
				'longitude':address.longitude,
				'latitude':address.latitude,
				token:this.token
			};
			var url = '/api/quickpay/order/location'
			this.Unfold_data.upload_data(params, 'POST', url, res => {
				console.log('res',res);
				if(res.statusCode==200&&res.data.code==1){
					//删除逗号
					if(res.data.data.cityCode!=0){
						this.location = res.data.data.addressComponent.city;
						this.code1 = res.data.data.cityCode
					}else{
						this.Unfold_data.showWindow('请开启定位功能')
						this.location = '定位失败！'
					}
					console.log(this.location);
				}else{
					//显示错误信息
					// this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		getNavData(){
			var url = '/api/goods/category/lists';
			let params = {};
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if (res.data.code == 1) {
					this.menu_list = res.data.data;
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		sfk(){
				 this.Unfold_data.showWindow('敬请期待'); 
		},
		zb(){
				  this.Unfold_data.showWindow('敬请期待'); 
		},
		
		bindGoodsList(id,name){
			uni.navigateTo({
				url:"../goos_list/goos_list?category_ids="+id+"&name="+name+"&shop_id="+this.shop_id+"&token="+this.token
			})
		},
		
		// 人气榜单
		getRqData() {
			var url = '/api/goods/goods/popularity_list';
			let params = {
				token:this.token,
				shop_id:this.shop_id
			};
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if (res.data.code == 1) {
					this.mooodList = res.data.data;
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},

		// 今日秒杀
		getKillData() {
			var url = '/api/goods/goods/activity';
			let params = {
				token:this.token,
				shop_id:this.shop_id
			};
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if (res.data.code == 1) {
					this.killList = res.data.data.goods;
					let date = new Date();
					let now = date.getTime();
					let ksTime = res.data.data.starttime;
					let jsTime = res.data.data.endtime;
					let leftTime = jsTime - now;
					let begTime = ksTime - now;
					if(begTime>0){
						 this.hours=Math.floor(begTime / 1000 / 60 / 60 % 24)
						 this.minutes=Math.floor(begTime / 1000 / 60 % 60)
						 this.seconds=Math.floor(begTime / 1000 % 60)
					}else if(leftTime>0){
						 this.hours= Math.floor(leftTime / 1000 / 60 / 60 % 24)
						 this.minutes=Math.floor(leftTime / 1000 / 60 % 60)
						 this.seconds=Math.floor(leftTime / 1000 % 60)
					}
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		// 火爆推荐
		getData() {
			var url = '/api/goods/goods/hot_recommend';
			let params = {
				token:this.token,
				shop_id:this.shop_id
			};
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if (res.data.code == 1) {
					this.recommedList = res.data.data;
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
       bindGoodsShop(id){
       	uni.navigateTo({
       		url:'../goods_detail/goods_detail?id='+id+'&shop_id='+this.shop_id+'&token='+this.token
       	})
       },
		bindTab() {
		   this.goodsBool=false
		   this.goodsBools=true
		   this.shopBool=true
		   this.shopBools=false
		},
		bindTabs() {
			this.goodsBool=true
			this.goodsBools=false
			this.shopBool=false
			this.shopBools=true
		},

		// 热门榜单
		getShiftData() {
			var url = '/api/goods/goods/hot_list';
			let params = {
				token:this.token,
				shop_id:this.shop_id
			};
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if (res.data.code == 1) {
					this.hotList = res.data.data;
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		// 首发新品
		getGoodsList() {
			var url = '/api/goods/goods/Starting';
			let params = {
				token:this.token,
				shop_id:this.shop_id
			};
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if (res.data.code == 1) {
					this.goodsList = res.data.data;
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		// 优易好物
		getOpiData() {
			var url = '/api/goods/goods/good_matter';
			let params = {
				token:this.token,
				shop_id:this.shop_id
			};
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if (res.data.code == 1) {
					this.optimList = res.data.data;
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		tohome(){
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			})
		},
		getLikeData() {
			var url = '/api/goods/goods/guess_like';
			let params = {
				token:this.token,
				shop_id:this.shop_id
			};
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if (res.data.code == 1) {
					this.likeList = res.data.data;
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		toKefu(){
			sui.navigateTo({
				url:'/pages/user_chat/user_chat'
			})
		},
		changeTab(index,url) {
			this.curTab = index;
			sui.navigateTo({
				url:url
			})
		},
		getTabData() {
			let url = '/api/increment/Increment/Bottom_navigation_icon';
			let params = {
				token: this.token,
				shop_id: this.shop_id
			};
			this.Unfold_data.tea_data(params, 'POST', url, res => {
				if (res.data.code == 1) {
					this.tabListParent = res.data.data;
				} else {
					//显示错误信息
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.container {
	width: 750upx;
	padding-bottom: calc(var(--window-bottom) + 55px);
	.head-box {
		.inp-box {
			padding-top: 50upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.location_box {
				text-align: center;
				image {
					width: 37upx;
					height: 48upx;
				}
				text {
					font-size: 27upx;
					color: #e8f1ef;
					display: block;
					width: 96upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.inp-item {
				width: 430upx;
				height: 60upx;
				background: #ffffff;
				border-radius: 45upx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-left: 20upx;
				padding-left: 20upx;
				image {
					width: 30upx;
					height: 30upx;
				}
				input {
					margin-left: 20upx;
				}
			}
			.sys-box {
				margin-left: 20upx;
				text-align: center;
				image {
					width: 40upx;
					height: 40upx;
				}
				text {
					font-size: 27upx;
					color: #ffffff;
					display: block;
				}
			}
			.kf_box {
				margin-left: 20upx;
				text-align: center;
				image {
					width: 50upx;
					height: 42upx;
				}
				text {
					font-size: 27upx;
					color: #e8f1ef;
					display: block;
				}
			}
		}
	}
	.menu_box {
		width: 750upx;
		background-color: #ffffff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 260upx;
		padding: 20upx;
		border-radius: 15upx;
		.menu_item {
			width: 20%;
			text-align: center;
			margin-bottom: 30upx;
			image {
				width: 90upx;
				height: 90upx;
				border-radius: 50%;
			}
			text {
				font-size: 28upx;
				display: block;
			}
		}
	}
	.moods {
		margin-top: 20upx;
		width: 750upx;
		height: 210upx;
		position: relative;
		.rq_img {
			width: 750upx;
			height: 210upx;
		}
		.rq_top {
			position: absolute;
			top: 35upx;
			left: 300upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.rq_title {
				font-size: 26upx;
				color: #fffefe;
			}
			.rq_left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-left: 80upx;
				.rq_qg {
					width: 130upx;
					height: 40upx;
					background: #ff5653;
					border-radius: 19upx;
					font-size: 26upx;
					color: #fffefe;
					text-align: center;
					line-height: 40upx;
				}
				image {
					width: 40upx;
					height: 40upx;
					margin-left: 10upx;
				}
			}
		}
		.rq_bottom {
			position: absolute;
			top: 90upx;
			left: 290upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.rq_item {
				width: 120upx;
				height: 100upx;
				background: #ffffff;
				text-align: center;
				margin-right: 10upx;
				image {
					width: 60upx;
					height: 50upx;
					margin-top: 10upx;
				}
				.price {
					font-size: 22upx;
					color: #fb5960;
				}
			}
		}
	}
	.seckill_box {
		width: 750upx;
		padding: 20upx;
		.kill_head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.kill_left {
				display: flex;
				justify-content: flex-start;
				.left_title {
					font-size: 32upx;
					color: #333333;
					text {
						font-size: 22upx;
						color: #808080;
					}
				}
				.left_time {
					margin-left: 5upx;
					text {
						display: inline-block;
						width: 40upx;
						height: 40upx;
						background: #333333;
						font-size: 22upx;
						color: #ffffff;
						text-align: center;
						line-height: 40upx;
					}
				}
			}
			.kill_right {
				font-size: 30upx;
				color: #808080;
			}
		}
		.kill_list {
			margin-top: 15upx;
			width: 710upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.kill_item {
				width: 350upx;
				height: 130upx;
				margin-left: 10upx;
				background-color: #ffe8e8;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.left {
					margin-left: 20upx;
					.title {
						width: 160upx;
						font-size: 32upx;
						color: red;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.sub_title {
						width: 130upx;
						font-size: 25upx;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				.right {
					margin-left: 40upx;
					image {
						width: 130upx;
						height: 90upx;
					}
				}
			}
		}
	}
	.recommed {
		margin-top: 43upx;
		.reco_head {
			font-size: 30upx;
			font-weight: bold;
			color: #333333;
			margin-left: 20upx;
		}
		.reco_list {
			width: 710upx;
			margin: 20upx auto 0;
			.list_tab {
				width: 710upx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.goods {
					width: 355upx;
					height: 70upx;
					background: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/goods.png') no-repeat;
					background-size: 355upx 70upx;
					text-align: center;
					line-height: 80upx;
					font-size: 28upx;
					color: #dd524d;
				}
				.goods_select {
					width: 355upx;
					height: 70upx;
					background: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/goods_select.png') no-repeat;
					background-size: 355upx 70upx;
					text-align: center;
					line-height: 80upx;
					font-size: 28upx;
					color: #fff;
				}
				.shops {
					width: 355upx;
					height: 70upx;
					background: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/shop.png') no-repeat;
					background-size: 355upx 70upx;
					text-align: center;
					line-height: 70upx;
					font-size: 28upx;
					color: #dd524d;
				}
				.shops_select {
					width: 355upx;
					height: 70upx;
					background: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/shop_select.png') no-repeat;
					background-size: 355upx 70upx;
					text-align: center;
					line-height: 70upx;
					font-size: 28upx;
					color: #fff;
				}
			}
			.list_list {
				width: 710upx;
				height: 280upx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				background: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/kk.png') no-repeat;
				background-size: 710upx 280upx;
				padding: 0 5upx;
				.list_item {
					margin-left: 30upx;
					.item_img {
						width: 150upx;
						height: 150upx;
						image {
							width: 150upx;
							height: 150upx;
						}
					}
					.item_title {
						width: 150upx;
						font-size: 20upx;
						color: #333333;
						margin-top: 10upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				.list_item:nth-child(1) {
					margin-left: 5upx;
				}
			}
		}
	}
	.hot_box {
		.hot_head {
			font-size: 32upx;
			color: #333333;
			font-weight: bold;
			margin: 20upx 20upx 0 20upx;
		}
		.hot_list {
			margin-top: 20upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.hot_item {
				width: 25%;
				padding: 10upx;
				text-align: center;
				border-left: 1px solid #cbcbcb;
				.hot_title {
					width: 152upx;
					font-size: 30upx;
					color: #fd9a4b;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.hot_img {
					margin-top: 30upx;
					width: 140upx;
					height: 110upx;
					image {
						width: 140upx;
						height: 110upx;
						margin-left: 10upx;
					}
				}
				.hot_price {
					margin-top: 15upx;
				}
			}
		}
	}
	.new_goods {
		width: 750upx;
		padding: 0 20upx;
		margin-top: 20upx;
		.goods_head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.head_left {
				font-size: 32upx;
				color: #333333;
				font-weight: bold;
			}
			.head_right {
				font-size: 32upx;
				color: #808080;
			}
		}
		.goods_list {
			width: 710upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 20upx;
			.goods_item {
				width: 33.33%;
				text-align: center;
				border-left: 1px solid #cbcbcb;
				.goods_img {
					position: relative;
					margin-top: 30upx;
					image {
						width: 160upx;
						height: 160upx;
					}
					.rq {
						width: 70upx;
						height: 70upx;
						background: #333333;
						border-radius: 50%;
						display: block;
						position: absolute;
						top: -28upx;
						right: 12upx;
						font-size: 26upx;
						color: #ffffff;
						text-align: center;
					}
				}
				.goods_title {
					font-size: 22upx;
					color: #333333;
				}
				.goods_sale {
					min-width: 130upx;
					height: 25upx;
					background: #ff5653;
					font-size: 16upx;
					text-align: center;
					line-height: 25upx;
					color: #ffffff;
				}
				.goods_price {
					font-size: 26upx;
					color: #ce3c39;
					margin-top: 10upx;
				}
				.goods_old {
					font-size: 22upx;
					text-decoration: line-through;
					color: #999999;
				}
			}
			.goods_item:nth-child(1) {
				border-left: none;
			}
		}
	}
	.optim_box {
		width: 750upx;
		padding: 0 20upx;
		margin-top: 20upx;
		.goods_head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.head_left {
				font-size: 32upx;
				color: #333333;
				font-weight: bold;
			}
			.head_right {
				font-size: 32upx;
				color: #808080;
			}
		}
		.optim_list {
			width: 710upx;
			margin-top: 20upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			.optim_item {
				width: 340upx;
				background: #ffffff;
				box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.13);
				border-radius: 10upx;
				padding: 40upx 15upx 20upx;
				margin-bottom: 15upx;
				.optim_img {
					image {
						width: 310upx;
						height: 240upx;
					}
				}
				.optim_title {
					width: 310upx;
					font-size: 20upx;
					color: #010101;
					margin-top: 10upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.optim_sub {
					width: 310upx;
					font-size: 16upx;
					margin-top: 5upx;
					color: #808080;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.price {
					margin-top: 10upx;
					font-size: 26upx;
					font-weight: bold;
					color: #ee1336;
				}
			}
		}
	}
	.back_hom{
		position: fixed;
		right: 40upx;
		top: 1100upx;
		z-index: 99;
		image{
			width: 100upx;
			height: 100upx;
		}
	}
	.lungth {
		margin: 20upx 0;
		.lungth_head {
			display: flex;
			justify-content: center;
			align-items: center;
			.line {
				width: 120upx;
				border: 1upx solid #cccccc;
				margin-right: 20upx;
			}
			.like {
				font-size: 35upx;
				color: #333;
				font-weight: bold;
			}
			.lines {
				margin-left: 20upx;
				width: 120upx;
				border: 1upx solid #cccccc;
			}
		}
		.like_list {
			width: 710upx;
			margin-top: 20upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.like_item {
				width: 230upx;
				background: #ffffff;
				box-shadow: 0px 0px 29upx 0px rgba(150, 150, 150, 0.3);
				border-radius: 20upx;
				margin-left: 20upx;
				text-align: center;
				image {
					width: 100%;
					height: 200upx;
				}
				.like_title {
					width: 220upx;
					font-size: 26upx;
					font-weight: 500;
					color: #000000;
					margin-top: 5upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.like_subtitle {
					width: 190upx;
					margin: 10upx 0;
					font-size: 20upx;
					color: #787878;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.like-item:nth-child(1) {
				margin-left: 0;
			}
		}
	}
	.bottom-tab {
		position: fixed;
		z-index: 3000;
		background-color: #f7f6f6;
		bottom: 0%;
		left: 0%;
		width: 100%;
		height: 120upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.bottom-tab-item-center {
			width: 24%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: -40upx;
			.first-img {
				width: 100upx;
				height: 100upx;
				margin-top: -0.8rem;
	
				border-radius: 50%;
			}
			.text-position {
				margin-top: 0rem;
				font-size: 0.6rem;
				color: #757575;
			}
			.text-on {
				color: #b49828;
			}
		}
		.bottom-tab-item-sider {
			width: 15%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.first-img {
				width: 46upx;
				height: 46upx;
			}
			.text-position {
				margin-top: 12upx;
				font-size: 0.6rem;
				color: #757575;
			}
			.text-on {
				font-weight: bold;
				color: #c8241b;
			}
		}
	}
}
</style>
